<template>
  <div>
    <div v-if="port != 'client'" id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          申请编号：<a-input
          :maxLength="128"
            v-model="searchData.rechargeCode"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          客户编号：
          <a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.tenantId"
          >
            <a-select-option
              :value="item.tenantId"
              v-for="item in accArray"
              :key="item.id"
              :titles="item.title"
            >
              {{ item.companyName + "/" + item.tenantId }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          申请时间：<a-range-picker
            v-model="acTime"
            @change="onStartDateChange"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
          <div v-show="expand">
            结算时间：<a-range-picker
              v-model="closeTime"
              @change="onCloseDateChange"
              style="width: 60%"
            />
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6">
          <div v-show="expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <div v-if="port === 'client'" id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          申请编号：<a-input
          :maxLength="128"
            v-model="searchData.rechargeCode"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          申请时间：<a-range-picker
            v-model="acTime"
            @change="onStartDateChange"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          结算时间：<a-range-picker
            v-model="closeTime"
            @change="onCloseDateChange"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          <div>
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
          </div>
        </a-col>
      </a-row>
    </div>
    <p style="margin-top: 15px">
      <a-button
        @click="searchBtn('1')"
        :style="
          searchData.time === '1'
            ? 'color: #61ba8f;border-color: #61ba8f;border: 1px solid #61ba8f'
            : 'color: #626262;border-color: #fff;border: 1px solid #ccc'
        "
        style="margin: 0 5px"
        size="small"
        >昨日</a-button
      >
      <a-button
        @click="searchBtn('3')"
        :style="
          searchData.time === '3'
            ? 'color: #61ba8f;border-color: #61ba8f;border: 1px solid #61ba8f'
            : 'color: #626262;border-color: #fff;border: 1px solid #ccc'
        "
        style="margin: 0 5px"
        size="small"
        >上周</a-button
      >
      <a-button
        @click="searchBtn('5')"
        :style="
          searchData.time === '5'
            ? 'color: #61ba8f;border-color: #61ba8f;border: 1px solid #61ba8f'
            : 'color: #626262;border-color: #fff;border: 1px solid #ccc'
        "
        style="margin: 0 5px"
        size="small"
        >上月</a-button
      >
    </p>
    <div class="btn" style="display: flex; margin-top: 10px">
      <div class="news">
        <a-button
          @click="creditedModal"
          type="primary"
          style="
            background: #66b1ff;
            color: #fff;
            border: none;
            margin-left: 8px;
            margin-right: 20px;
          "
        >
          新建入账
        </a-button>
        <a-button
          v-if="port != 'client'"
          @click="debitModal"
          type="primary"
          style="
            background: #66b1ff;
            color: #fff;
            border: none;
            margin-left: 8px;
            margin-right: 20px;
          "
        >
          新建扣费
        </a-button>
      </div>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-tabs default-active-key="5" @change="callback">
        <a-tab-pane key="5">
          <span slot="tab">
            <a-badge :count="0" :offset="[15, 0]">未入账 </a-badge>
          </span>
          <ChargeTopupTable
            :port="port"
            :getTableList="getTableList"
            v-if="tabKey === '5'"
            :tableList="tableList"
          />
        </a-tab-pane>
        <a-tab-pane key="15">
          <span slot="tab">
            <a-badge :count="0" :offset="[15, 0]">已入账 </a-badge>
          </span>
          <ChargeTopupTable
            :port="port"
            :getTableList="getTableList"
            v-if="tabKey === '15'"
            :tableList="tableList"
          />
        </a-tab-pane>
        <a-tab-pane key="25">
          <span slot="tab">
            <a-badge :count="0" :offset="[15, 0]">被退回 </a-badge>
          </span>
          <ChargeTopupTable
            :port="port"
            :getTableList="getTableList"
            v-if="tabKey === '25'"
            :tableList="tableList"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
    <!-- //入账申请模态框 -->
    <a-modal v-model="creditedVisible" title="入账申请">
      <template slot="footer" class="modelBtn">
        <a-button
          @click="creditedVisible = false"
          style="background: #d7d7d7; color: #fff; border: none"
          >取消</a-button
        >
        <a-button :loading="loading" @click="onSubmitCredited" type="primary"
          >确定</a-button
        >
      </template>
      <a-form-model
        ref="crediteRuleForm"
        :model="creditedForm"
        :rules="creditedRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item
          v-if="port != 'client'"
          label="客户编号:"
          prop="tenantId"
        >
          <a-select
            show-search
            option-filter-prop="children"
            :filter-option="filterOption"
            v-model="creditedForm.tenantId"
          >
            <a-select-option
              :value="item.tenantId"
              v-for="item in accArray"
              :key="item.id"
              :titles="item.title"
            >
              {{ item.companyName + "/" + item.tenantId }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          v-if="port != 'client'"
          label="费用项:"
          prop="costTypeId"
        >
          <a-select v-model="creditedForm.costTypeId" @change="changeCostType">
            <a-select-option
              :titles="item.title"
              :value="item.key"
              v-for="item in costItemA"
              :key="item.key"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="收款账号:" prop="paymentAccount">
          <a-select v-model="creditedForm.paymentAccount">
            <a-select-option
              :value="item.title"
              v-for="item in bankArray"
              :key="item.key"
              :titles="item.title"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="转账账号:" prop="transferAccount">
          <a-auto-complete
            v-model="creditedForm.transferAccount"
            :maxLength="128"
          />
        </a-form-model-item>
        <a-form-model-item label="交易流水号:" prop="serialNumber">
          <a-input :maxLength="128" v-model="creditedForm.serialNumber" />
        </a-form-model-item>
        <a-form-model-item label="充值金额:" prop="cost">
          <a-input-number
            style="width: 100%"
            :min="1"
            v-model="creditedForm.cost"
          />
        </a-form-model-item>
        <a-form-model-item label="入账币种:" prop="currencyId">
          <a-select v-model="creditedForm.currencyId" @change="changeCurrency">
            <a-select-option
              :value="item.key"
              v-for="item in moneyAlways"
              :key="item.key"
              :titles="item.title"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="结算币种:" prop="settlementCurrencyId">
          <a-select
            v-model="creditedForm.settlementCurrencyId"
            @change="changeSettlementCurrency"
          >
            <a-select-option
              :value="item.key"
              v-for="item in BillingCurrency"
              :key="item.key"
              :titles="item.title"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="备注:" prop="remark">
          <a-textarea
            :maxLength="256"
            v-model="creditedForm.remark"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- //扣费申请模态框 -->
    <a-modal v-model="debitVisible" title="扣费申请">
      <template slot="footer" class="modelBtn">
        <a-button
          @click="debitVisible = false"
          style="background: #d7d7d7; color: #fff; border: none"
          >取消</a-button
        >
        <a-button :loading="loading" type="primary" @click="onSubmitDebit"
          >确定</a-button
        >
      </template>
      <a-form-model
        ref="debitRuleForm"
        :model="creditedForm"
        :rules="debitRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item ref="tenantId" label="客户编号:" prop="tenantId">
          <a-select
            show-search
            option-filter-prop="children"
            :filter-option="filterOption"
            v-model="creditedForm.tenantId"
          >
            <a-select-option
              :value="item.tenantId"
              v-for="item in accArray"
              :key="item.id"
              :titles="item.title"
            >
              {{ item.companyName + "/" + item.tenantId }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="费用项:" prop="costTypeId">
          <a-select v-model="creditedForm.costTypeId" @change="changeCostType">
            <a-select-option
              :titles="item.title"
              :value="item.key"
              v-for="item in costItemB"
              :key="item.key"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="申请金额:" prop="cost">
          <a-input-number
            style="width: 100%"
            :min="1"
            v-model="creditedForm.cost"
          />
        </a-form-model-item>

        <a-form-model-item label="结算币种:" prop="currencyId">
          <a-select v-model="creditedForm.currencyId" @change="changeCurrency">
            <a-select-option
              :value="item.key"
              v-for="item in BillingCurrency"
              :key="item.key"
              :titles="item.title"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="备注:" prop="remark">
          <a-textarea
            :maxLength="256"
            v-model="creditedForm.remark"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
  </div>
</template>

<script>
import ChargeTopupTable from "@/components/system/FinanceManagement/ChargeTopupTable.vue";
import {
  add_recharge,
  add_Deductions,
  pageBatchManage,
} from "@/apis/system/FinanceManagement/FinanceManagement";
import { treeTagDictionary } from "@/apis/common";
import { mapState } from "vuex";
export default {
  props: ["port"],
  components: {
    ChargeTopupTable,
  },
  async created() {
    this.getCostItem();
    this.getTableList();
  },
  data() {
    return {
      tableList: [],
      //入账申请表单
      creditedForm: {
        //充值金额
        cost: null,
        // 费用类型
        costType: null,
        //费用类型ID
        costTypeId: null,
        //入账币种
        currency: null,
        //入账币种ID
        currencyId: null,
        // 类型 1:入账 2：扣款
        rechargeType: null,
        //备注
        remark: null,
        // 流水号
        serialNumber: null,
        //客户ID
        tenantId: null,
        //收款账号
        paymentAccount: null,
        //转账账号
        transferAccount: null,
        //结算币种ID
        settlementCurrencyId: null,
        //结算币种
        settlementCurrency: null,
      },
      //扣费申请表单
      debitForm: {},

      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      //入账申请模态框
      creditedVisible: false,
      //扣费申请模态框
      debitVisible: false,
      searchData: {
        current: 1,
        size: 10,
        rechargeState: "5",
        tenantId: null,
        rechargeCode: null,
        stStartDate: null,
        startDate: null,
        stEndtDate: null,
        endtDate: null,
        time: null,
      },
      tabKey: "5",
      acTime: null,
      closeTime: null,
      expand: false,
      spinning: false,
      loading: false,
      //费用项A
      costItemA: [],
      //费用需B
      costItemB: [],
      //结算币种
      moneyAlways: [],
      //入账币种
      BillingCurrency:[],
      //银行账号数组
      bankArray: [],
      total: 1,
    };
  },
  methods: {
    //三个日期条件查询
    searchBtn(flag) {
      this.searchData.time = flag;
      this.getTableList();
    },
    //入账确认按钮
    onSubmitCredited() {
      this.loading = true;
      let submitObj = { ...this.creditedForm };
      this.$refs.crediteRuleForm.validate((valid) => {
        if (valid) {
          setTimeout(async () => {
            let { code } = await add_recharge(submitObj);
            if (code === "10000") {
              this.loading = false;
              this.creditedVisible = false;
              this.getTableList();
            }
            this.loading = false;
          }, 1000);
        } else {
          this.loading = false;
          return false;
        }
      });
    },
    //扣费确认按钮
    onSubmitDebit() {
      this.loading = true;
      let submitObj = { ...this.creditedForm };
      submitObj.rechargeType = "2";
      this.$refs.debitRuleForm.validate((valid) => {
        if (valid) {
          setTimeout(async () => {
            let { code } = await add_Deductions(submitObj);
            if (code === "10000") {
              this.loading = false;
              this.debitVisible = false;
              this.getTableList();
            }
            this.loading = false;
          }, 1000);
        } else {
          this.loading = false;
          return false;
        }
      });
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTableList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTableList();
    },
    //费用项变更
    changeCostType(value, option) {
      this.creditedForm.costType = option.data.attrs.titles;
    },
    //入账币种变更
    changeCurrency(value, option) {
      this.creditedForm.currency = option.data.attrs.titles;
    },
    //结算币种变更
    changeSettlementCurrency(value, option) {
      this.creditedForm.settlementCurrency = option.data.attrs.titles;
    },
    //显示入账申请模态框
    creditedModal() {
      if (this.$refs.crediteRuleForm) {
        this.$refs.crediteRuleForm.resetFields();
      }
      this.creditedForm = {
        //充值金额
        cost: null,
        // 费用类型
        costType: null,
        //费用类型ID
        costTypeId: null,
        //入账币种
        currency: null,
        //入账币种ID
        currencyId: null,
        //结算币种ID
        settlementCurrencyId: null,
        //结算币种
        settlementCurrency: null,
        // 类型 1:入账 2：扣款
        rechargeType: null,
        //备注
        remark: null,
        // 流水号
        serialNumber: null,
        //客户ID
        tenantId: null,
        //收款账号
        paymentAccount: null,
        //转账账号
        transferAccount: null,
      };
      this.creditedVisible = true;
    },
    //显示退费申请模态框
    debitModal() {
      if (this.$refs.debitRuleForm) {
        this.$refs.debitRuleForm.resetFields();
      }
      this.creditedForm = {
        //充值金额
        cost: null,
        // 费用类型
        costType: null,
        //费用类型ID
        costTypeId: null,
        //币种
        currency: null,
        //币种ID
        currencyId: null,
        // 类型 1:入账 2：扣款
        rechargeType: null,
        //备注
        remark: null,
        // 流水号
        serialNumber: null,
        //客户ID
        tenantId: null,
        //收款账号
        paymentAccount: null,
        //转账账号
        transferAccount: null,
      };
      this.debitVisible = true;
    },
    //重置按钮
    resetSearch() {
      this.acTime = null;
      this.closeTime = null;
      let current = this.searchData.current;
      let size = this.searchData.size;
      this.searchData = {
        current: current,
        size: size,
        rechargeState: this.tabKey,
        tenantId: null,
        rechargeCode: null,
        stStartDate: null,
        startDate: null,
        stEndtDate: null,
        endtDate: null,
        time: null,
      };
      this.getTableList();
    },
    //时间查询
    onStartDateChange(date, dateString) {
      this.searchData.startDate = dateString[0];
      this.searchData.endtDate = dateString[1];
    },
    //结算时间查询
    onCloseDateChange(date, dateString) {
      this.searchData.stStartDate = dateString[0];
      this.searchData.stEndtDate = dateString[1];
    },
    callback(key) {
      this.searchData.current = 1;
      this.searchData.rechargeState = key;
      this.tabKey = key;
      this.getTableList();
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //获取费用项及结算币种
    async getCostItem() {
      //费用项
      let { code, responseBody } = await treeTagDictionary({
        tagType: 11,
      });
      if (code === "200") {
        this.costItemA = responseBody;
      }
      //费用项
      let res = await treeTagDictionary({
        tagType: 12,
      });
      if (code === "200") {
        this.costItemB = res.responseBody;
      }
      //币种
      let money = await treeTagDictionary({
        tagType: 10,
      });
      if (code === "200") {
        this.moneyAlways = money.responseBody;
        this.BillingCurrency=money.responseBody.filter((v)=>{
          if(v.title=='USD'||v.title=='EUR'||v.title=='GBP'){
            return v
          }
        })
      }
      let bank = await treeTagDictionary({
        tagType: 13,
      });
      if (code === "200") {
        this.bankArray = bank.responseBody;
      }
    },
    async getTableList() {
      this.spinning = true;
      let { code, responseBody } = await pageBatchManage(this.searchData);
      if (code === "200") {
        this.tableList = responseBody.records;
        this.total = responseBody.total * 1;
      }
      this.spinning = false;
    },
  },
  computed: {
    ...mapState(["accArray"]),
    //入账申请验证
    creditedRules() {
      if (this.port === "client") {
        return {
          paymentAccount: [
            { required: true, message: "请填写收款账号！", trigger: "blur" },
          ],

          settlementCurrencyId: [
            { required: true, message: "请选择结算币种！", trigger: "blur" },
          ],
          currencyId: [
            { required: true, message: "请选择入账币种！", trigger: "blur" },
          ],
          serialNumber: [
            { required: true, message: "请填写交易流水号！", trigger: "blur" },
          ],
          cost: [
            { required: true, message: "请填写充值金额！", trigger: "blur" },
          ],
        };
      } else {
        return {
          tenantId: [
            { required: true, message: "请选择客户编号！", trigger: "blur" },
          ],
          costTypeId: [
            { required: true, message: "请选择费用项！", trigger: "blur" },
          ],
          paymentAccount: [
            { required: true, message: "请填写收款账号！", trigger: "blur" },
          ],

          settlementCurrencyId: [
            { required: true, message: "请选择结算币种！", trigger: "blur" },
          ],
          currencyId: [
            { required: true, message: "请选择入账币种！", trigger: "blur" },
          ],
          serialNumber: [
            { required: true, message: "请填写交易流水号！", trigger: "blur" },
          ],
          cost: [
            { required: true, message: "请填写充值金额！", trigger: "blur" },
          ],
        };
      }
    },
    //扣费申请验证
    debitRules() {
      return {
        tenantId: [
          { required: true, message: "请选择客户编号！", trigger: "blur" },
        ],
        costTypeId: [
          { required: true, message: "请选择费用项！", trigger: "blur" },
        ],
        currencyId: [
          { required: true, message: "请选择结算币种！", trigger: "blur" },
        ],
        cost: [
          { required: true, message: "请填写充值金额！", trigger: "blur" },
        ],
      };
    },
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>